<template>
    <div style="width: 100vw;height: 100vh;">
        <div class="page_warp" :style="{ transform: `scale(${scaleRatio})` }">
            <div class="header">
                <div class="header_warp">
                    <div class="header_top">
                        <div class="header_top_left">
                            <img class="left_img" src="../imgUrl/mapisIocn.png" alt="">
                            <div class="left_text">贞一环境智慧运管中心</div>
                        </div>

                        <div class="header_top_right">
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader001.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">污水厂总数/个</div>
                                    <div class="right_tnum">1</div>
                                </div>
                            </div>
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader002.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">能耗/Kwh</div>
                                    <div class="right_tnum">0</div>
                                </div>
                            </div>
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader003.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">设备总数/件</div>
                                    <div class="right_tnum">0</div>
                                </div>
                            </div>
                            <div class="right_warp">
                                <div class="right_warp_left">
                                    <img style="width: 100%;" src="../imgUrl/maoHeader004.png" alt="">
                                </div>
                                <div class="right_warp_right">
                                    <div class="right_text">治理污水吨数/吨</div>
                                    <div class="right_tnum">0</div>
                                </div>
                            </div>
                            <img @click="mapBlck" style="width: 60px;height: 60px;margin: 5px 10px;"
                                src="../imgUrl/mapBlack.png" alt="">
                        </div>
                    </div>
                    <img style="width: 100%;" src="../imgUrl/mapheaderxian.png" alt="">
                </div>

            </div>
            <div class="warp">
                <div class="left">
                    <div class="left_card">
                        <div class="left_cardbj">
                            <div class="text">
                                设备统计
                            </div>
                            <div>
                                <bar3DMapChartshe :height="'230px'" />
                            </div>
                        </div>

                    </div>
                    <div class="left_card">
                        <div class="left_cardbj">
                            <div class="text">
                                巡检统计
                            </div>
                            <div>
                                <bar3DMapChartleftStart :height="'230px'" />
                            </div>
                        </div>

                    </div>
                    <div class="left_card">
                        <div class="left_cardbj">
                            <div class="text">
                                巡检记录
                            </div>
                            <div>
                                <div class="maptable">
                                    <autoScroll :step="1" :period="100" :cycle="true" :resume-smooth="true">
                                        <div class="maptable_list auto-scroll-row" :key="index"
                                            v-for="(item, index) of mapInspection">
                                            <div class="maptable_li" style="text-align: left;">{{ item.name }}</div>
                                            <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                            <div class="maptable_li" style="text-align: right;">{{ item.remerk }}</div>
                                        </div>
                                    </autoScroll>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="center">
                    <div class="center_img">
                        <img style="width: 80%;margin: 30px auto;" src="../imgUrl/mapThree3d.png" mode="scaleToFill" />
                    </div>
                    <div class="center_warp">
                        <div class="center_warp_div">
                            <div class="center_card">
                                <div class="center_cardbj">
                                    <div class="text">
                                        能耗统计
                                    </div>
                                    <div>
                                        <lineAndebarMapChartStart :height="'230px'" />
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="center_warp_div">
                            <div class="center_card">
                                <div class="center_cardbj">
                                    <div class="text">
                                        产泥信息
                                    </div>
                                    <div>
                                        <barMapGeeChartStart :height="'230px'" />
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="right_card">
                        <div class="right_cardbj">
                            <div class="text">
                                进水统计
                            </div>
                            <div>
                                <lineMapChartStart :height="'230px'" />
                            </div>
                        </div>

                    </div>
                    <div class="right_card">
                        <div class="right_cardbj">
                            <div class="text">
                                告警统计
                            </div>
                            <div>
                                <bar3DMapChartStart :height="'230px'" />
                            </div>
                        </div>

                    </div>
                    <div class="right_card">
                        <div class="right_cardbj">
                            <div class="text">
                                告警记录
                            </div>
                            <div>
                                <div class="maptable">
                                    <autoScroll :step="1" :period="100" :cycle="true" :resume-smooth="true">
                                        <div class="maptable_list auto-scroll-row" :key="index"
                                            v-for="(item, index) of mapInspection">
                                            <div class="maptable_li" style="text-align: left;">{{ item.name }}</div>
                                            <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                            <div class="maptable_li" style="text-align: right;">{{ item.remerk }}</div>
                                        </div>
                                    </autoScroll>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import bar3DMapChartshe from './model/bar3DMapChartshe.vue'
import lineAndebarMapChartStart from './model/lineAndebarMapChartStart.vue'
import barMapGeeChartStart from './model/barMapGeeChartStart.vue'
import bar3DMapChartStart from './model/bar3DMapChartStart.vue'
import lineMapChartStart from './model/lineMapChartStart.vue'
import bar3DMapChartleftStart from './model/bar3DMapChartleftStart.vue'
import autoScroll from 'vue-list-auto-scroll-tsc'
export default {
    name: 'mapping',
    components: {
        autoScroll,
        bar3DMapChartshe,
        lineAndebarMapChartStart,
        barMapGeeChartStart,
        bar3DMapChartStart,
        lineMapChartStart,
        bar3DMapChartleftStart
    },
    data() {
        return {
            mapInspection: [

            ],
            timer: null,
            date: new Date(),
            scaleRatio: 1,
            screenWidth: 0,
        }
    },
    created() {

    },
    mounted() {
        let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000)
        this.updateScreenWidth(); // 初始化宽度
        window.addEventListener('resize', this.updateScreenWidth); // 监听窗口大小变化

    },
    methods: {
        updateScreenWidth() {
            this.screenWidth = window.innerWidth - 5;
            this.scaleRatio = this.screenWidth / 2560
        },
        mapBlck() {
            this.$emit('success', {
                type: 1
            })
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateScreenWidth); // 移除监听器
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}

.page_warp {
    width: 2560px;
    height: 1080px;
    background-image: url(../imgUrl/maptwobjt.png);
    background-size: 100% 100%;
    transform-origin: 0% 0%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.header {
    width: 2560px;
    height: 114px;

    .header_warp {
        width: 100%;
        background: linear-gradient(177deg, #070B14 5%, rgba(7, 11, 20, 0) 100%);

        .header_top {
            display: flex;
            justify-content: space-between;

            .header_top_left {
                display: flex;
                padding: 16px 16px 0px 30px;

                .left_img {
                    width: 80px;
                    height: 80px;
                }

                .left_text {
                    font-weight: bold;
                    font-size: 36px;
                    color: #FFFFFF;
                    line-height: 75px;
                    margin-left: 30px;
                }
            }

            .header_top_right {
                display: flex;
                // margin-top: 10px;
                padding-top: 10px;

                .right_warp {
                    display: flex;

                    .right_warp_left {
                        width: 80px;
                        padding: 10px;
                    }

                    .right_warp_right {
                        width: 200px;
                        padding: 10px 0px 0px 0px;

                        .right_text {
                            font-family: Inter, Inter;
                            font-weight: 400;
                            font-size: 22px;
                            color: #D7EBFF;

                        }

                        .right_tnum {
                            font-weight: bold;
                            font-size: 32px;
                            color: #FFFFFF;

                        }
                    }
                }
            }
        }
    }
}

.warp {
    display: flex;

    .left {
        width: 600px;

        .left_card {
            padding: 8px 20px;

            .left_cardbj {
                width: 100%;
                height: 290px;
                background-image: url(../imgUrl/mapThree.png);
                background-size: 100% 100%;

                .text {
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: bold;
                    font-size: 20px;
                    color: #FFFFFF;
                    padding: 15px 10px;
                }
            }

        }
    }

    .center {
        flex: 1;

        .center_img {
            width: 100%;
            height: 590px;
            text-align: center;
            margin-top: 20px;
        }

        .center_warp {
            display: flex;

            .center_warp_div {
                width: 50%;
                // margin-top: 10px;

                .center_card {
                    padding: 8px 20px;

                    .center_cardbj {
                        width: 100%;
                        height: 290px;
                        background-image: url(../imgUrl/mapThree.png);
                        background-size: 100% 100%;

                        .text {
                            font-family: Source Han Sans CN, Source Han Sans CN;
                            font-weight: bold;
                            font-size: 16px;
                            color: #FFFFFF;
                            padding: 15px 10px;
                        }
                    }

                }
            }
        }
    }

    .right {
        width: 600px;

        .right_card {
            padding: 8px 20px;

            .right_cardbj {
                width: 100%;
                height: 290px;
                background-image: url(../imgUrl/mapThree.png);
                background-size: 100% 100%;

                .text {
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: bold;
                    font-size: 20px;
                    color: #FFFFFF;
                    padding: 15px 10px;
                }
            }

        }
    }
}

.maptable {
    width: 96%;
    height: 240px;
    overflow: hidden;
    text-align: center;
    margin: 0px auto;


    ::-webkit-scrollbar {
        display: none;
    }


}

.maptable_list {
    display: flex;
    width: 100%;
    height: 26px;
    font-size: 14px;
    background: rgba(0, 170, 255, 0.08);
    border-radius: 0px 0px 0px 0px;
    color: rgba(255, 255, 255, 1);
    padding: 5px;
    margin-top: 3px;

    .maptable_li {
        width: 33%;
        overflow: hidden;
    }
}

::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}
</style>
